<template>
  <a-card title="公告栏" class="card">
    <template #extra>
      <a-link>查看更多</a-link>
    </template>
    <div v-if="formModel.listData.length !== 0">
      <div v-for="item in formModel.listData" :key="item.id" class="content">
        <div class="top">
          <div class="title">
            <icon-svg class="icon-lightning" icon-class="icon-gonggao" />
            <div>{{ item.title }}</div>
          </div>
          <div class="time">发布时间:{{ formatUTCDate(item.createTime) }}</div>
        </div>
        <hr class="line" />
        <div class="bon">
          <img v-if="item.fileId" :src="imageSrc" style="width: 100%" />
          <span v-if="!item.fileId" class="con">{{ item.text }}</span>
        </div>
      </div>
    </div>
    <div v-else>
      <a-empty />
    </div>
  </a-card>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { pullAnnouncementList, AnnouncementList } from '@/api/tenant';
  import useLoading from '@/hooks/loading';
  import { formatUTCDate } from '@/utils/date';

  const imageSrc = '';
  const list = () => {
    return {
      listData: [] as AnnouncementList[],
    };
  };
  const formModel = ref(list());
  const BusinessType = ref();
  const TypeChange = () => {};
  const { loading, setLoading } = useLoading();
  const pagination = reactive({
    page: 1,
    rows: 20,
    total: 0,
  });
  const fetchData = async (
    params = {
      ...pagination,
    }
  ) => {
    setLoading(true);
    try {
      const { data } = await pullAnnouncementList(params);
      formModel.value.listData = data.rows;
      //   pagination.total = data.total;
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };
  fetchData();
</script>

<style lang="less" scoped>
  :deep(.arco-card-header) {
    background-color: #f2f3f5;
    border: 1px solid #f2f3f5;
  }

  :deep(.arco-card-header-title) {
    font-size: 14px;
    font-weight: bold;
  }

  .card {
    border: 1px solid #f2f3f5;
  }

  .content {
    width: 100%;
    height: 200px;
    padding: 12px 20px 16px 20px;
    box-shadow: 0px 0px 20px 0px #d4e5ff;
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 10px;

    .top {
      width: 100%;
      height: 40px;

      .title {
        display: flex;
        height: 16px;
        line-height: 16px;
        color: #333333;
        justify-content: flex-start;
        align-items: center;

        .icon-lightning {
          width: 16px;
          font-size: 20px;
          margin-right: 5px;
        }
      }

      .time {
        height: 14px;
        line-height: 14px;
        color: #cccccc;
        margin-top: 2px;
      }
    }

    .line {
      background-color: #f2f3f5;
      border: none;
      height: 1px;
    }

    .bon {
      width: 100%;
      height: 110px;
      margin-top: 10px;

      .con {
        height: 113px;
        font-family: Inter, Inter;
        font-weight: 400;
        font-size: 12px;
        color: #888888;
        line-height: 14px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
        -webkit-box-orient: vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素的排列方式)
        text-overflow: ellipsis; //溢出用省略号显示
        overflow: hidden; //超出的文本隐藏
        -webkit-line-clamp: 3; //表明3行文本显示省略号,这里要根据自身需求进行设置
      }
    }
  }

  .right {
    margin-right: 17px;
    font-weight: bold;
    color: #cccccc;
  }

  .unfold {
    position: relative;
    width: 150px;
    left: 40%;
  }
</style>
